<template>
    <div class="setTable">
        <dl class="dlBox" v-for="(con,i) of renderTableObj" :key="i">
            <dt class="dtBox">{{con.key}}</dt>
            <dd class="ddBox">{{con.value}}</dd>
        </dl>
    </div>
</template>

<script>
export default {
    props:{
        renderTableObj: {
            default:()=>{},
            type: Object
        }
    }
}
</script>

<style scoped>
    .setTable {
        background-color: #fff;
        margin: 20px 0 35px ;
        color: #333;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .dlBox {
        display: flex;
        border-bottom: 1px dashed #ccc;
    }
    .dtBox {
        width: 90px;
        padding: 0 5px 0 12px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        color: #999;
    }
    .ddBox {
        /* flex-grow: 1; */
        width: 285px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>